<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

<form class="layui-form" lay-filter="userForm" id="add_user_form" action="" style="padding:15px 10px;">
    <input type="hidden" name="userId">
    <input type="hidden" name="photo" id="photo" class="layui-input">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="userName" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">颜值</label>
        <div class="layui-input-block">
            <input type="password" name="salt" required lay-verify="required" placeholder="请输入颜值" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户角色</label>
        <div class="layui-input-block" >
            <select name="roleIds" id="roles_add" xm-select-direction="down">
                <option value="-1">请选择</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户头像</label>
        <button type="button" class="layui-btn" id="test1">上传图片</button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo1">
            <p id="demoText"></p>
            <img src="" id="zhaopian">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所属园所</label>
        <!--<input type="text" name="glId">-->
        <div class="layui-input-block" id="g">
            <select name="glId" id="glId">
                <option value="-1">请选择</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">是否锁定</label>
        <div class="layui-input-block">
            <input type="checkbox" name="locked"  lay-skin="switch" lay-text="开启|锁定" checked value="1">
        </div>
    </div>
    <script>
        layui.form.render();
        $.get("http://localhost:9999/Role/all",function(data){
            $.each(data,function(){
                var opt = $("<option></option>").appendTo("#roles_add");
                opt.text(this.roleName).val(this.roleId);
            });
            layui.formSelects.render()
        });
        $.get("http://localhost:9999/Graden/index",function(data){
            $.each(data.data,function(){
                var opt = $("<option></option>").appendTo("#glId");
                opt.text(this.glName).val(this.glId);
            });
            layui.form.render()
        });
        $("#test1").click(function () {
            $("#photo").remove();
        })

    </script>
    <script>
        layui.use('upload', function() {
            var $ = layui.jquery
                , upload = layui.upload;

            //普通图片上传
            var uploadInst = upload.render({
                  elem: '#test1'
                , url: 'http://localhost:9999/kmsuser/photo'
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                        $("#photo").val(file.name);
                        $("#zhaopian").remove();
                    });
                }
            });
        });
            </script>
</form>
</body>
</html>